<template>
  <div class="panel">
    <div class="chart" ref="line"></div>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      chartLine: null,
      optionLine: "",
      showData: [],
    };
  },
  watch: {
    "$store.state.optionLine": {
      handler: function (val) {
        this.optionLine = val;
        this.buildChart();
      },
      deep: true,
    },
    "$store.state.sqlHandleData": {
      handler: function (val) {
        this.showData = val;
        this.buildChart();
      },
    },
    "$store.state.sqlData": {
      handler: function (val) {
        this.showData = val;
        this.buildChart();
      },
      deep:true
    },
    "$store.state.selectPanelData": {
      handler: function () {
        // 坐标轴数据变化
        this.buildChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.optionLine = this.$store.getters.getOptionLine;
    this.showData = this.$store.getters.getSQLData;
    this.buildChart();
  },
  methods: {
    buildChart() {
      // 获取要渲染的数据
      const optionLineData = JSON.parse(JSON.stringify(this.optionLine));
      const sqlHandleData = JSON.parse(JSON.stringify(this.showData));
      const x = this.$store.getters.getSelectPanelXData;
      const y = this.$store.getters.getSelectPanelYData;
      const xArray = sqlHandleData.map((i) => i[x]); // X 轴
      const showDatax = sqlHandleData.map((i) => i[y]); // 数据
      // X轴data: [1, 2, 3, 4, 5, 6, 7],
      // 数据data: [200, 300, 300, 900, 1500, 1200, 600],
      // [...optionLineData.baseOption.series]; // 处理要修改的数据 - 有几条线，每条线的描述
      optionLineData.baseOption.series[0].name = y;
      optionLineData.baseOption.series[0].data = showDatax;
      optionLineData.baseOption.xAxis.data = xArray;
      const xStart = 100 - Math.floor(1000 / xArray.length);
      optionLineData.baseOption.dataZoom = [
        {
          show: true,
          start: xStart,
          end: 100,
        },
      ];
      this.chartLine = this.echarts.init(this.$refs.line);
      this.chartLine.setOption(optionLineData, true);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
